<!--
~ Licensed to the Apache Software Foundation (ASF) under one or more
~ contributor license agreements.  See the NOTICE file distributed with
~ this work for additional information regarding copyright ownership.
~ The ASF licenses this file to You under the Apache License, Version 2.0
~ (the "License"); you may not use this file except in compliance with
~ the License.  You may obtain a copy of the License at
~
~    http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->

<ng-container>
    <div class="parameter-providers-table h-full flex flex-col">
        <div class="flex-1 relative">
            <div class="listing-table overflow-y-auto absolute inset-0">
                <table
                    mat-table
                    [dataSource]="dataSource"
                    matSort
                    matSortDisableClear
                    (matSortChange)="sortData($event)"
                    [matSortActive]="initialSortColumn"
                    [matSortDirection]="initialSortDirection">
                    <!-- More Details Column -->
                    <ng-container matColumnDef="moreDetails">
                        <th mat-header-cell *matHeaderCellDef></th>
                        <td mat-cell *matCellDef="let item">
                            @if (canRead(item)) {
                                <div class="flex items-center gap-x-2">
                                    @if (hasErrors(item)) {
                                        <div
                                            class="pointer fa fa-warning has-errors caution-color"
                                            nifiTooltip
                                            [delayClose]="false"
                                            [tooltipComponentType]="ValidationErrorsTip"
                                            [tooltipInputData]="getValidationErrorsTipData(item)"></div>
                                    }
                                    @if (hasBulletins(item)) {
                                        <div
                                            class="pointer fa fa-sticky-note-o primary-color"
                                            nifiTooltip
                                            [delayClose]="true"
                                            [tooltipComponentType]="BulletinsTip"
                                            [tooltipInputData]="getBulletinsTipData(item)"></div>
                                    }
                                </div>
                            }
                        </td>
                    </ng-container>

                    <!-- Name Column -->
                    <ng-container matColumnDef="name">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                            <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Name</div>
                        </th>
                        <td mat-cell *matCellDef="let item" [title]="formatName(item)">
                            <div
                                [ngClass]="{
                                    unset: !canRead(item),
                                    'neutral-color': !canRead(item)
                                }"
                                class="overflow-hidden overflow-ellipsis whitespace-nowrap">
                                {{ formatName(item) }}
                            </div>
                        </td>
                    </ng-container>

                    <!-- Type column -->
                    <ng-container matColumnDef="type">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                            <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Type</div>
                        </th>
                        <td mat-cell *matCellDef="let item" [title]="formatType(item)">
                            {{ formatType(item) }}
                        </td>
                    </ng-container>

                    <!-- Bundle column -->
                    <ng-container matColumnDef="bundle">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                            <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Bundle</div>
                        </th>
                        <td mat-cell *matCellDef="let item" [title]="formatBundle(item)">
                            {{ formatBundle(item) }}
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="actions">
                        <th mat-header-cell *matHeaderCellDef></th>
                        <td mat-cell *matCellDef="let item">
                            <div class="flex items-center justify-end gap-x-2">
                                @if (
                                    canRead(item) ||
                                    hasAdvancedUi(item) ||
                                    canFetch(item) ||
                                    canDelete(item) ||
                                    canClearBulletins(item) ||
                                    canManageAccessPolicies()
                                ) {
                                    <button
                                        mat-icon-button
                                        type="button"
                                        [matMenuTriggerFor]="actionMenu"
                                        class="h-16 w-16 flex items-center justify-center icon global-menu">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                }
                                <mat-menu #actionMenu="matMenu" xPosition="before">
                                    @if (canRead(item)) {
                                        <button mat-menu-item (click)="configureClicked(item)">
                                            <i class="fa fa-cog primary-color mr-2"></i>
                                            {{ canWrite(item) ? 'Edit' : 'View Configuration' }}
                                        </button>
                                    }
                                    @if (hasAdvancedUi(item)) {
                                        <button mat-menu-item (click)="advancedClicked(item)">
                                            <i class="fa fa-cogs primary-color mr-2"></i>
                                            Advanced
                                        </button>
                                    }
                                    @if (canFetch(item)) {
                                        <button mat-menu-item (click)="fetchClicked(item)">
                                            <i class="fa fa-arrow-circle-down primary-color mr-2"></i>
                                            Fetch Parameters
                                        </button>
                                    }
                                    @if (canDelete(item)) {
                                        <button mat-menu-item (click)="deleteClicked(item)">
                                            <i class="fa fa-trash primary-color mr-2"></i>
                                            Remove
                                        </button>
                                    }
                                    @if (canClearBulletins(item)) {
                                        <button mat-menu-item (click)="clearBulletinsClicked(item)">
                                            <i class="fa fa-eraser primary-color mr-2"></i>
                                            Clear Bulletins
                                        </button>
                                    }
                                    @if (canRead(item)) {
                                        <button mat-menu-item (click)="viewDocumentationClicked(item)">
                                            <i class="fa fa-book primary-color mr-2"></i>
                                            View Documentation
                                        </button>
                                    }
                                    @if (canManageAccessPolicies()) {
                                        <button mat-menu-item (click)="manageAccessPoliciesClicked(item)">
                                            <i class="fa fa-key primary-color mr-2"></i>
                                            Manage Access Policies
                                        </button>
                                    }
                                </mat-menu>
                            </div>
                        </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                    <tr
                        mat-row
                        *matRowDef="let row; let even = even; columns: displayedColumns"
                        [class.even]="even"
                        (click)="selectParameterProvider.next(row)"
                        [class.selected]="isSelected(row)"></tr>
                </table>
            </div>
        </div>
    </div>
</ng-container>
